import { onMounted, ref } from "vue";

const getInset = (htmlRef: any, popupRef?: any, flag: boolean = true) => {
    const top = ref<number>(0);
    const right = ref<number>(0);
    const bottom = ref<number>(0);
    const left = ref<number>(0);
    const insetTop = ref<string>("auto");
    const insetRight = ref<string>("auto");
    const insetBottom = ref<string>("auto");
    const insetLeft = ref<string>("auto");
    // 三角定位
    const triangleTop = ref<string>("auto")
    const triangleRight = ref<string>("auto")
    const triangleBottom = ref<string>("auto")
    const triangleLeft = ref<string>("auto")
    const rotate = ref<string>("rotate(0)")
    // 输入框ref
    const inputRef = ref()
    onMounted(() => {
        if (flag) {
            inputRef.value = htmlRef.value.$el
        }
        const { width, height } = getWH();
        getOffset();
        getPosition(width, height);
        window.onresize = () => {
            return (() => {
                if (popupRef.value.style.display !== 'none') {
                    getOffset();
                    getPosition(width, height);
                }
            })();
        };
        window.onscroll = () => {
            if (popupRef.value.style.display !== 'none') {
                getOffset();
                getPosition(width, height);
            }
        };
    });

    // 获取元素在视屏中的位置
    const getOffset = () => {
        top.value = inputRef.value.offsetTop; // dom 的顶边到顶部的距离
        left.value = inputRef.value.offsetLeft; // dom 的左边到左边的距离
        const domToBottom = inputRef.value.offsetTop + inputRef.value.offsetHeight; // dom 的底边到顶部的距离
        bottom.value = document.body.clientHeight - domToBottom;
        right.value =
            document.body.offsetWidth - inputRef.value.offsetWidth - left.value; // dom 的右边到右边的距离
    };

    // 获取元素宽高
    const getWH = () => {
        popupRef.value.style.visibility = "hidden";
        popupRef.value.style.display = "block";
        const width = popupRef.value.offsetWidth;
        const height = popupRef.value.offsetHeight;
        popupRef.value.style.visibility = "";
        popupRef.value.style.display = "";
        return {
            width,
            height,
        };
    };

    // 获取弹出框的位置
    const getPosition = (popuWidth: number, popuHeight: number) => {
        // 三角偏移距离
        const W: number = 5 * Math.sin(45)
        let top1: number | string = "auto";
        let right1: number | string = "auto";
        let bottom1: number | string = "auto";
        let left1: number | string = "auto";
        insetTop.value = top1
        insetRight.value = right1
        insetBottom.value = bottom1
        insetLeft.value = left1
        triangleTop.value = "auto"
        triangleRight.value = "auto"
        triangleBottom.value = "auto"
        triangleLeft.value = "auto"
        // 输入框元素宽高
        const htmlWidth: number = inputRef.value.offsetWidth;
        const htmlHeight: number = inputRef.value.offsetHeight;

        // 获取下拉框左右距离
        const getLeftRight = () => {
            if (htmlWidth >= popuWidth) {
                left1 = left.value + (htmlWidth - popuWidth) / 2
                insetLeft.value = left1 + "px"
                const triangleLeft1 = left.value + (htmlWidth / 2) - left1 - W
                triangleLeft.value = triangleLeft1 + "px"
            } else {
                if (left.value <= right.value) {
                    if (left.value >= (popuWidth - htmlWidth) / 2) {
                        left1 = left.value - (popuWidth - htmlWidth) / 2
                        insetLeft.value = left1 + "px"
                        const triangleLeft1 = left.value + (htmlWidth / 2) - left1 - W
                        triangleLeft.value = triangleLeft1 + "px"
                    }
                } else {
                    if (right.value >= (popuWidth - htmlWidth) / 2) {
                        right1 = right.value - (popuWidth - htmlWidth) / 2
                        const triangleRight1 = right.value + (htmlWidth / 2) - right1 - W
                        triangleRight.value = triangleRight1 + "px"
                        insetRight.value = right1 + "px"
                    }
                }
            }
        };

        // 获取下拉框上下距离
        const getTopBottom = () => {
            if (top.value <= bottom.value) {
                if (top.value >= (popuHeight - htmlHeight) / 2) {
                    top1 = top.value - (popuHeight - htmlHeight) / 2
                    insetTop.value = top1 + "px"
                    const triangleTop1 = top.value + (htmlHeight / 2) - top1 - W
                    triangleTop.value = triangleTop1 + "px"
                }
            } else {
                if (bottom.value >= (popuHeight - htmlHeight) / 2) {
                    bottom1 = bottom.value - (popuHeight - htmlHeight) / 2
                    insetBottom.value = bottom1 + "px"
                    const triangleBottom1 = bottom.value + (htmlHeight / 2) - bottom1 - W
                    triangleBottom.value = triangleBottom1 + "px"
                }
            }
        }

        // 输入框底部距离大于下拉框高度
        const WPX: string = "calc(-5px / sin(45))"
        if (bottom.value > popuHeight + 10) {
            top1 = top.value + htmlHeight + 10;
            insetTop.value = top1 + "px";
            getLeftRight();
            rotate.value = "rotate(-45deg)"
            triangleTop.value = WPX            
            return;
        }
        // 输入框顶部距离大于下拉框高度
        if (top.value > popuHeight + 10) {
            bottom1 = bottom.value + htmlHeight + 10;
            insetBottom.value = bottom1 + "px";
            getLeftRight();
            rotate.value = "rotate(135deg)"
            triangleBottom.value = WPX
            return;
        }
        // 输入框左边距离大于下拉框高度
        if (left.value > popuWidth + 10) {
            right1 = right.value + htmlWidth + 10;
            insetRight.value = left1 + "px";
            getTopBottom()
            rotate.value = "rotate(45deg)"
            triangleRight.value = WPX
            return;
        }
        // 输入框右边距离大于下拉框高度
        if (right.value > popuWidth + 10) {
            left1 = left.value + htmlWidth + 10;
            insetLeft.value = left1 + "px";
            getTopBottom()
            rotate.value = "rotate(-135deg)"
            triangleLeft.value = WPX
            console.log(123);
            
            return;
        }
        top1 = top.value + htmlHeight + 10;
        insetTop.value = top1 + "px";
        getLeftRight()
        rotate.value = "rotate(-45deg)"
        triangleTop.value = WPX
    };

    return {
        top,
        right,
        bottom,
        left,
        insetTop,
        insetRight,
        insetBottom,
        insetLeft,
        triangleTop,
        triangleRight,
        triangleBottom,
        triangleLeft,
        rotate
    };
};

export { getInset };
